<template>
  <el-drawer
    :visible.sync="showDrawer"
    modal-append-to-body
    append-to-body
    size="80vw"
    :close-on-click-modal="false"
     @close="handleClose"
  >
   <div slot="title" style="cursor: pointer;display: flex;">
    <i class="el-icon-arrow-left"  @click="showDrawer = false"></i>
    <el-row class="card-title" v-if="student_info">
        <span>年级:{{student_info.grade_name}}</span>
        <span>姓名:{{student_info.name}}</span>
    </el-row>
    <h2 style="text-align: center;flex: 1; margin-left: -20%;">终端设置</h2>
   </div>
    <el-card shadow="never" body-style="padding: 10px 20px">
    
        <div class="info-item">
          <span>学号:{{student_info.student_no}}</span>
          <span>状态:{{student_info.is_active===1?'在线':'离线' }}</span>
           <span>电量:{{(student_info.electricity_level)+'%' }}</span>
        
          <span>时间:{{$util.toDateString(student_info.create_time )}}</span>
        
          <span>IMEI:{{student_info.imei }}</span>
          <span>手机:{{student_info.phone }}</span>
        </div>
        <el-tabs tab-position="top" style="margin:30px 10%">
           <el-tab-pane label="亲情号码">
            <div class="titflex">
              <span>序号</span>
              <span>亲情号码</span>
            </div>
            <el-form ref="form" :model="form" label-width="50%" size="mini" :rules="formRules">
              <el-form-item label="1" class="centered-label" prop="phone1">
                <el-input clearable v-model="form.phone1" placeholder="请输入亲情号码"></el-input>
              </el-form-item>
              <el-form-item label="2" class="centered-label"  prop="phone2">
                <el-input clearable v-model="form.phone2" placeholder="请输入亲情号码"></el-input>
              </el-form-item>
              <el-form-item label="3" class="centered-label"  prop="phone3">
                <el-input clearable v-model="form.phone3" placeholder="请输入亲情号码"></el-input>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary" @click="onSubmit">保存设置</el-button>
              </el-form-item>
            </el-form>
           </el-tab-pane>
<!--           <el-tab-pane label="白名单">-->
<!--            <div class="titflex">-->
<!--              <span>序号</span>-->
<!--              <span>白名单</span>-->
<!--            </div>-->
<!--            <el-form ref="form1" :model="form1" label-width="50%" size="mini" :rules="formRules1">-->
<!--              <el-form-item label="1" class="centered-label"  prop="phone1">-->
<!--                <el-input clearable v-model="form1.phone1" placeholder="请输入白名单"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="2" class="centered-label"  prop="phone2">-->
<!--                <el-input clearable v-model="form1.phone2" placeholder="请输入白名单"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="3" class="centered-label"  prop="phone3">-->
<!--                <el-input clearable v-model="form1.phone3" placeholder="请输入白名单"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item size="large">-->
<!--                <el-button type="primary" @click="onSubmit1">保存设置</el-button>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--           </el-tab-pane>-->
        </el-tabs>
    </el-card>
  </el-drawer>
</template>
<script>
import validate from 'ele-admin/packages/validate';
export default {
  name: "exercisePedometer",
  components: { },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    student_info:Object
  },
  data() { 
    return {
      isshow: false,
      form: {
        phone1: "",
        phone2:"",
        phone3:"",
      },
      form1: {
        phone1:"",
        phone2:"",
        phone3:"",
      },
      formRules: {
        phone1: [
          {pattern: validate.phone, message: '手机号格式不正确', trigger: 'blur'}
        ],phone2: [
          {pattern: validate.phone, message: '手机号格式不正确', trigger: 'blur'}
        ],phone3: [
          {pattern: validate.phone, message: '手机号格式不正确', trigger: 'blur'}
        ]
      },
      formRules1: {
        phone1: [
          {pattern: validate.phone, message: '手机号格式不正确', trigger: 'blur'}
        ],phone2: [
          {pattern: validate.phone, message: '手机号格式不正确', trigger: 'blur'}
        ],phone3: [
          {pattern: validate.phone, message: '手机号格式不正确', trigger: 'blur'}
        ]
      }
    }
  },
  watch: {
    // visible(newVal) {
    //   this.isshow=newVal
    // },
	// if (val&&val.id) {
	//   this.queryterminalrelative(val.id)
	//   this.queryterminalwhitelist(val.id)
	// }
    student_info() {
	this.queryterminalrelative()
    }
  },
  computed: {
    showDrawer: {
      set(val) { 
        this.$emit("closeDrawer",val)
      },
      get() { 
        return this.visible
      }
      
    }
  },
  created() {
  },
  methods: {
    /* 更新visible */
    // updateVisible(value) {
    //   this.isshow=value
    // },
    handleClose() {
      this.showDrawer = false;
    },
    queryterminalrelative() {
      this.$http
        .get("/terminalrelative/index", { params: {imei:this.student_info.imei} })
        .then(res => {
let list = res.data.data
let length=list&&list.length
if (length === 1) {
this.form.phone1=list[0]
}
if (length === 2) {
this.form.phone1 = list[0]
this.form.phone2=list[1]
}
if (length === 3) {
this.form.phone1 = list[0]
this.form.phone2 = list[1]
this.form.phone3=list[2]
}
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    queryterminalwhitelist() {
      this.$http
        .get("/terminalwhitelist/index", { params: {imei:this.student_info.imei} })
        .then(res => {
          let list = res.data.data 
          let length=list&&list.length
          
if (length === 1) {
this.form1.phone1=list[0]
}
if (length === 2) {
this.form1.phone1 = list[0]
this.form1.phone2=list[1]
}
if (length === 3) {
this.form1.phone1 = list[0]
this.form1.phone2 = list[1]
this.form1.phone3=list[2]
}
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let phone1rule=/^1\d{10}$/.test(this.form.phone1)
          if (this.form.phone1&&!phone1rule) { 
            return false
          }
          let phone2rule=/^1\d{10}$/.test(this.form.phone2)
          if (this.form.phone2&&!phone2rule) { 
            return false
          }
          let phone3rule=/^1\d{10}$/.test(this.form.phone3)
          if (this.form.phone3&&!phone3rule) { 
            return false
          }
        let phone=this.form.phone1+','+this.form.phone2+','+this.form.phone3
      this.$http
        .get("/terminalrelative/edit", { params: {student_id:this.student_info.id,imei:this.student_info.imei,phone:phone} })
        .then(res => {
          console.log("res",res)
          this.$message.success('设置成功');
        })
        .catch(e => {
          this.$message.error(e.message);
        });
      } else {
          return false;
        }
      });
    },
    onSubmit1() { 
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          let phone1rule=/^1\d{10}$/.test(this.form1.phone1)
          if (this.form1.phone1&&!phone1rule) { 
            return false
          }
          let phone2rule=/^1\d{10}$/.test(this.form1.phone2)
          if (this.form1.phone2&&!phone2rule) { 
            return false
          }
          let phone3rule=/^1\d{10}$/.test(this.form1.phone3)
          if (this.form1.phone3&&!phone3rule) { 
            return false
          }
      let phone=this.form1.phone1+','+this.form1.phone2+','+this.form1.phone3
      this.$http
        .get("/terminalwhitelist/edit", { params: {student_id:this.student_info&&this.student_info.id,phone:phone} })
        .then(res => {
          console.log("res",res)
          this.$message.success('设置成功');
        })
        .catch(e => {
          this.$message.error(e.message);
        });
      } else {
          return false;
        }
      });
    }
  }

}
</script>
<style scoped>
.card-title {
  padding: 0 20px;
}
.card-title span{
    margin-right: 30px;
}
.info-item span{
  margin-right: 30px;
}
.titflex{
  display: flex;
  line-height:40px;
}
.titflex span{
  flex:1;
  text-align: center;
}
</style>
<style>
.centered-label .el-form-item__label{
  text-align: center;
}
</style>